<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>API页面</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css"/>
</head>
<body>
<div class="container" style="margin-top: 5px">

    <h3 style="font-weight: bold;">方法名：<span class="label label-success"
                                             th:text="${methodName}">获取用户名</span></h3>
    <div class="row">
        <div class="col-sm-10">
            <div class="input-group">
                <span class="input-group-addon">描述</span>
                <input type="text" class="form-control" id="desc"
                       style="font-weight: bold" th:value="${methodDesc}">
                <input type="hidden" id="methodId" th:value="${methodId}">
            </div>
        </div>
        <div class="col-sm-2">
            <button class="btn" id="updateDesc" type="button">
                提交修改
            </button>
        </div>
    </div>
    <br/>
    <h4 style="font-weight: bold">请求参数：</h4>
    <input type="hidden" id="requestParamSize" th:value="${requestParams.size()}">
    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th width="10%">名称</th>
            <th width="10%">类型</th>
            <th width="30%">调试参数</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="req,reqStat:${requestParams}" th:with="type=${req.type}">
            <td>
                <span th:text="${req.name}"></span>
                <input type="hidden" th:id="${'name'+reqStat.index}" th:value="${req.getName()}">
            </td>
            <td>
                <span th:text="${type}"></span>
                <input type="hidden" th:id="${'type'+reqStat.index}" th:value="${req.getType()}">
                <input type="hidden" th:id="${'index'+reqStat.index}" th:value="${req.getIndex()}">
            </td>
            <td th:if="${type.equals('object')}">
                <p>在""中填入参数</p>
                <textarea class="form-control" rows="8" th:id="${'value'+reqStat.index}"
                          th:text="${req.getRequestJson()}"></textarea>
            </td>
            <td th:if="${type.equals('object')}">
                <p th:text="${req.getDescription()}"></p>
                <textarea class="form-control" rows="8" readonly th:text="${req.getModelJson()}"></textarea>
                <input type="hidden" th:value="${req.getModelDef().getClassName()}" th:id="${'className'+reqStat.index}">
            </td>
            <td th:if="not ${type.equals('object')}"><input class="form-control" th:id="${'value'+reqStat.index}"
                                                            type="text"></td>
            <td th:if="not ${type.equals('object')}" th:text="${req.description}"></td>
        </tr>

        </tbody>
    </table>

    <h4 style="font-weight: bold">返回参数：</h4>
    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th width="10%">名称</th>
            <th width="10%">类型</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
        <tr th:with="type=${responseParam.type}">
            <td th:text="${responseParam.name}">Tanmay</td>
            <td th:text="${responseParam.type}">Bangalore</td>
            <td th:if="${type.equals('object')}">
                <p th:text="${responseParam.description}"></p>
                <textarea class="form-control" rows="8" readonly th:text="${responseParam.modelJson}">sss</textarea>
            </td>
            <td th:if="not ${type.equals('object')}" th:text="${responseParam.description}">Bangalore</td>
        </tr>
        </tbody>
    </table>
    <button class="btn btn-info" id="debug" type="button" data-loading-text="debug...">
        请求
    </button>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" onclick="chart()" data-toggle="modal" data-target="#myModal" data-loading-text="Loading...">
       统计
    </button>

    <div class="page-header"></div>

    <table class="table  table-bordered table-responsive">
        <tbody>
        <tr>
            <td style="font-weight: bold;font-size: medium;" width="15%">请求数据</td>
            <td><textarea class="form-control" rows="8" readonly id="requestData" style="font-weight: bold;color: #ea7d7d"></textarea></td>
        </tr>
        <tr>
            <td style="font-weight: bold;font-size: medium;">返回结果</td>
            <td><textarea class="form-control" rows="20" readonly id="response" ></textarea></td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">统计图</h4>
            </div>
            <div class="modal-body">
                <img id="img" style="width: 610px;margin-left: 10px" class="img-fluid" alt="Responsive image">
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/sweetalert.min.js"></script>
<script>
    $('#debug').bind('click', function () {
        const $btn = $(this).button('loading');
        const size = $('#requestParamSize').val();
        const requestParams = [];
        for (let i = 0; i < size; i++) {
            const param = {};
            const type=$('#type' + i).val();
            param['name'] = $('#name' + i).val();
            param['type'] = type;
            param['index'] = $('#index' + i).val();
            param['value'] = $('#value' + i).val();

            if (type==='object'){
                const modelDef={};
                modelDef['className']=$('#className'+i).val();
                param['modelDef']=modelDef;
            }
            requestParams.push(param);
        }
        const data = {};
        data['methodId'] = $('#methodId').val();
        data['requestParams'] = requestParams;
        data['parse']=false;
        $('#requestData').text(JSON.stringify(requestParams));
        $.ajax({
            url: '/base/debug',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (data) {
                const resp=$('#response');
                $btn.button('reset');
                if (data.flag) {
                    resp.attr("style","font-size: medium;font-weight: bold;color: dodgerblue");
                    resp.text(data.data);
                } else {
                    resp.attr("style","font-size: medium;font-weight: bold;color: red");
                    resp.text('Error: '+data.msg);
                    swal(data.msg);
                }
            }
        });
    });


    function chart() {
        const timestamp=Date.parse(new Date());
        const methodId=$('#methodId').val();
        const url='/base/chart?timestamp='+timestamp+'&methodId='+methodId;
        $('#img').attr('src',url);
    };


    $("#updateDesc").bind("click", function () {
        const $btn = $(this).button('update...');
        const methodId = $("#methodId").val();
        const desc = $("#desc").val();
        const data = {
            cId: methodId,
            cDesc: desc
        };
        $.ajax({
            url: '/base/method/desc',
            type: 'PUT',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (data) {
                $btn.button('reset');
                if (data.flag) {
                    swal("操作成功!", "已成功修改！", "success");
                } else {
                    swal("更新失败!请稍后重试");
                }
            }
        });

    })
</script>
</html>